<template>
  <div class="app">
    <h2>App:{{ info.name }}--{{ info.age }}--{{info.height}}</h2>

    <h2>App:{{ name }}--{{ age }}--{{height}}</h2>

    <h2>App:{{ newCount}}</h2>

    <button @click="age++">修改age</button>

    <button @click="newCount++">修改newCount</button>

  </div>
</template>

<script>
/*
toRefs()
  将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef() 创建的。

toRef()
  可以将值、refs 或 getters 规范化为 refs (3.3+)。
  也可以基于响应式对象上的一个属性，创建一个对应的 ref。这样创建的 ref 与其源属性保持同步：改变源属性的值将更新 ref 的值，反之亦然

unref()
  如果参数是 ref，则返回内部值，否则返回参数本身。这是 val = isRef(val) ? val.value : val 计算的一个语法糖。

*/
import {reactive, ref, toRef, toRefs, unref} from "vue";

export default {
  name: 'App',
  setup(props, context) {
    const info = reactive({
      name: "陶品奇",
      age: 22,
      height:199,
    })
    const count=ref(100)
    const newCount=unref(count)


    const {name, age} = toRefs(info)
    const height=toRef(info,"height")
    return {
      info,
      name,
      age,
      height,
      newCount
    }
  }
}
</script>

<style lang="less"></style>
